<script setup lang="ts">
import { ref, reactive } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'

const tableData1 = reactive([
  {
    file: 'keyword.json',
  },
  {
    file: 'qabot_config.yaml',
  },
  {
    file: 'stopwords2.txt',
  },
])

const tableData2 = reactive([
  {
    name: '点奶茶',
    status: '已提交',
    updateTime: '2020-01-03 15:02:39',
  },
  {
    name: '买月饼',
    status: '已提交',
    updateTime: '2020-01-02 11:45:57',
  },
  {
    name: '打印机维修',
    status: '已提交',
    updateTime: '2020-01-01 13:22:45',
  },
])

const tableData3 = reactive([{ file: 'communion.json' }, { file: 'jgbot_config.yaml' }])
</script>

<template>
  <div class="container">
    <title-bar>高级设置</title-bar>
    <el-alert
      title="本页面属于高级配置，随意修改可能会导致机器人功能错误"
      type="warning"
      show-icon
      :closable="false"
      center
    />
    <div class="main">
      <!-- 标题 -->
      <div class="wrap">
        <div class="left">
          <ul class="title">
            <li>问答功能</li>
          </ul>
        </div>
        <div class="right">
          <el-button>上传资源文件</el-button>
          <el-button>上传配置创建问答</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData1" style="width: 100%; margin-bottom: 40px">
        <el-table-column prop="file" label="资源文件" />
        <el-table-column label="操作" width="300px">
          <template #default>
            <el-button type="primary" link>下载</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 标题 -->
      <div class="wrap">
        <div class="left">
          <ul class="title">
            <li>任务功能</li>
          </ul>
        </div>
        <div class="right">
          <el-button>上传配置创建任务</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData2" style="width: 100%; margin-bottom: 40px">
        <el-table-column prop="name" label="任务名称" />
        <el-table-column prop="status" label="上线状态" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="300px">
          <template #default>
            <el-button type="primary" link>下载</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 标题 -->
      <div class="wrap">
        <div class="left">
          <ul class="title">
            <li>通用寒暄功能</li>
          </ul>
        </div>
        <div class="right">
          <el-button>上传资源文件</el-button>
          <el-button>上传配置创建寒暄</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData3" style="width: 100%; margin-bottom: 40px">
        <el-table-column prop="file" label="资源文件" />
        <el-table-column label="操作" width="300px">
          <template #default>
            <el-button type="primary" link>下载</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.main {
  padding: 20px;
}

.wrap {
  display: flex;
  justify-content: space-between;
}

.wrap .right {
  margin-right: 20px;
}

ul.title {
  margin-left: 40px;
  list-style-type: square;
}

ul.title li::marker {
  color: #1890ff;
}
</style>
